var StockTable = function () {
  var template = /* html */ `
    <div class="stock-table">
      <table ref="stockTable" cellspacing="0" cellpadding="0">
        <thead>
          <tr>
            <th style="min-width:140px;">物料名称</th>
            <th style="min-width:120px;">供应商</th>
            <th style="min-width:120px;">编号</th>
            <th style="min-width:120px;">规格型号</th>
            <th style="min-width:80px;">单位</th>
            <th style="min-width:100px;">仓库数量</th>
            <th style="min-width:100px;">占用数</th>
            <th style="min-width:100px;">未入库数量</th>
            <th style="min-width:100px;">
              <span v-if="type==='max'">安全库存上限</span>
              <span v-else-if="type==='min'">安全库存下限</span>
            </th>
            <th style="min-width:100px;">
              <span v-if="type==='max'">超出数</span>
              <span v-else-if="type==='min'">缺少数</span>
            </th>
            <th style="min-width:90px;">呆滞时间</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="stock in stockList" :key="stock.materialCode" :class="{'odd':stock.rowIndex%2!==0}">
            <td>{{stock.materialName}}</td>
            <td>{{stock.providerName}}</td>
            <td>{{stock.color}}</td>
            <td>{{stock.model}}</td>
            <td class="is-center no-warp">{{stock.unit}}</td>
            <td class="is-center no-warp">{{stock.count}}</td>
            <td class="is-center no-warp">{{stock.feedUseCount}}</td>
            <td class="is-center no-warp">{{stock.notInCount}}</td>
            <td class="is-center no-warp">{{stock.safetyStock}}</td>
            <td class="is-center no-warp" style="color:#ff0000">{{stock.limitCount}}</td>
            <td class="is-center no-warp" :class="'sluggishness-type-'+stock.dayType">
              <span>{{stock.dayCount}}</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  `;

  return {
    mixins: [boardRunningMixin],

    props: {
      stocks: {
        type: Array,
        required: true
      },
      type: {
        type: String,
        required: true
      }
    },

    watch: {
      changeData: function (newObj, oldObj) {
        if (newObj.rowIndex === oldObj.rowIndex && newObj.rowIndex >= newObj.stocks.length) {
          if (newObj.rowIndex !== 0) {
            this.rowIndex = 0;
            this.boardRunning();
            return;
          }
        }
        this.resetStockList();
      }
    },

    computed: {
      changeData: function () {
        return {
          rowIndex: this.rowIndex,
          stocks: this.stocks
        };
      }
    },

    data: function () {
      return {
        stockList: this.stocks,
        rowIndex: 0
      };
    },

    mounted: function () {
      this.boardRunning();

      var self = this;
      $(this.$el).resize(function () {
        self.clearTimeoutList();
        if (!self.checkRowMove()) {
          self.rowIndex = 0;
        }
        self.boardRunning();
      });
    },

    methods: {
      boardRunning: function () {
        this.clearTimeoutList();

        this.rowIndexRunning();
      },

      rowIndexRunning: function () {
        var self = this;
        var timeout = setTimeout(function () {
          if (self.checkRowMove()) {
            var rowIndex = self.rowIndex;
            rowIndex++;
            if (rowIndex >= self.stocks.length) {
              rowIndex = 0;
            }
            self.rowIndex = rowIndex;
          } else {
            self.rowIndex = 0;
          }

          self.timeoutList[0] = null;
          self.rowIndexRunning();
        }, 5000);
        this.timeoutList[0] = timeout;
      },

      checkRowMove: function () {
        var stockTable = this.$refs['stockTable'];
        if (stockTable === undefined) {
          return false;
        }

        var totalHeight = $(this.$el).height();
        var tableHeight = $(stockTable).height();
        return totalHeight < tableHeight;
      },

      resetStockList: function () {
        var stocks = this.stocks;
        var rowIndex = this.rowIndex;
        if (rowIndex === 0) {
          this.stockList = _.clone(stocks);
          return;
        }

        var stockList = stocks.slice(rowIndex);
        var stockArray = stocks.slice(0, rowIndex);
        stockList.pushArray(stockArray);
        this.stockList = stockList;
      }
    },

    template: template
  };
}();
